<template>
    <div>
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
            <table style="width: 70%">
                <tr>
                    <td  class="td1">
                        <span class="demonstration">作业:</span>
                    </td>
                    <td  class="td2">
                        <el-button type="primary" plain size="small" @click="dialogFormVisible = true">上传作业</el-button><br>
                        <el-dialog title="文件上传" :visible.sync="dialogFormVisible">
                            <el-form :model="form">
                                <el-upload
                                        class="upload-demo"
                                        action="https://jsonplaceholder.typicode.com/posts/"
                                        :on-preview="handlePreview"
                                        :on-remove="handleRemove"
                                        :before-remove="beforeRemove"
                                        multiple
                                        :limit="3"
                                        :on-exceed="handleExceed"
                                        :file-list="fileList">
                                    <el-button size="small" type="primary">点击上传</el-button>
                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                </el-upload>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                            </div>
                        </el-dialog>
                    </td>
                </tr>
                <tr>
                    <td class="td1">
                        <span class="demonstration">作业类型:</span>
                    </td>
                    <td class="td2">
                        <el-form-item label="">
                            <el-select v-model=formData.courseId  style="width: 30%;">
                                <option value=""  style="display: none;" disabled selected>请选择</option>
                                <option v-for="(item,i) in jobTypeOptions" :key="i"  v-text="item.label"></option>
                            </el-select>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td  class="td1">
                        <span class="demonstration">提交截至时间:</span>
                    </td>
                    <td class="td2">
                        <el-form-item label="">
                            <el-date-picker
                                    v-model="formData.endDate"
                                    type="datetime"
                                    placeholder="选择日期时间"
                                    default-time="12:00:00">
                            </el-date-picker>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td  class="td1">
                        <span class="demonstration">说明:</span>
                    </td>
                    <td class="td2">
                        <el-input
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 4}"
                                placeholder="请输入内容"
                                v-model="formData.mark">
                        </el-input>
                    </td>
                </tr>
            </table>
        </el-form>
        <el-button  style="margin-left: 500px" type="primary" @click="tijiao()">发布</el-button>
    </div>
</template>
<script>
    import axios from 'axios'
    export default {
        components: {},
        props: [],
        data() {
            return {
                // 文件上传
                fileList: [],
                jobTypeOptions: [],
                formData: {
                    jobFile: '',
                    courseId: '',
                    endDate: null,
                    mark: '',
                },
                //弹出框
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px',

                rules: {
                    jobFile: [{
                        required: true,
                        message: '请上传文件',
                        trigger: 'blur'
                    }, {
                        pattern: /\S/,
                        message: '请上传文件',
                        trigger: 'blur'
                    }],
                    courseId: [{
                        required: true,
                        message: '请选择类别',
                        trigger: 'blur'
                    }, {
                        pattern: /\S/,
                        message: '请选择类别',
                        trigger: 'blur'
                    }],
                    endDate: [{
                        required: true,
                        message: '请选择截至时间',
                        trigger: 'blur'
                    }, {
                        pattern: /\S/,
                        message: '请选择截至时间',
                        trigger: 'blur'
                    }],
                    mark: [{
                        required: true,
                        message: '说明',
                        trigger: 'blur'
                    }, {
                        pattern: /\S/,
                        message: '说明',
                        trigger: 'blur'
                    }],
                },
            }
        },
        computed: {},
        watch: {},
        created() {
        },
        mounted() {
            var _this = this
            axios.get('http://localhost:8080/jas/mport/course/getNames').then(function (resp) {
                for (let i=0;i<resp.data.length;i++){
                    const option ={label: '',value: ''}
                    option.label = resp.data[i].name
                    option.value = resp.data[i].courseId
                    _this.jobTypeOptions.push(option)
                }
            })
        },
        methods: {
            //文件上传
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                this.formData.jobFile = file.raw
                this.$message('ok');
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            //其他
            tijiao(){
                this.$refs['elForm'].validate(valid => {
                    if (!valid) return
                    // TODO 提交表单
                    alert("成功")
                })

            }
        }
    }

</script>
<style lang="scss" scoped>
    .el-upload__tip {
        line-height: 1.2;
    }
    tr,td{
        width: 50%;
        height: 50px;
    }
    .td1{
        text-align: right;
    }

</style>
